<div style="text-align: right; max-width: 1800px">
  <div>
    <button (click)="showModel()">
      🗄{{ storeService.currentLanguage.savemodel }}
    </button>
    <button (click)="createquery()">
      ⭐{{ storeService.currentLanguage.create }}
    </button>
    <button (click)="savequery()">
      🖪{{ storeService.currentLanguage.save }}
    </button>
    <button style="float: right; position: relative" (click)="settings = true">
      ⚙{{ storeService.currentLanguage.querysetting }}
    </button>
    <button style="height: 23px; float: right; position: relative">
      <span>📂{{ storeService.currentLanguage.open }}</span>
      <input
        style="opacity: 0; width: 50px; margin-left: -50px"
        type="file"
        (change)="handleFileSelect($event)"
      />
    </button>
  </div>

  <dx-popup
    [width]="500"
    [height]="570"
    [showTitle]="true"
    title="{{ storeService.currentLanguage.querysetting }}"
    [dragEnabled]="false"
    [closeOnOutsideClick]="true"
    [(visible)]="settings"
  >
    <div>
      <div style="display: flex">
        <span style="width: 150px; height: 50px">
          {{ storeService.currentLanguage.diagnosis
          }}{{ storeService.currentLanguage.space
          }}{{ storeService.currentLanguage.subdoccount }}：
        </span>
        <input
          style="text-align: left; margin-bottom: 15px"
          type="number"
          [(ngModel)]="storeService.query.parameter.limit.Diagnosis"
        />
      </div>
      <div style="display: flex">
        <span style="width: 150px; height: 50px">
          {{ storeService.currentLanguage.allergy
          }}{{ storeService.currentLanguage.space
          }}{{ storeService.currentLanguage.subdoccount }}：</span
        >
        <input
          style="text-align: left; margin-bottom: 15px"
          type="number"
          [(ngModel)]="storeService.query.parameter.limit.VAllergyDiagnosis"
        />
      </div>
      <div style="display: flex">
        <span style="width: 150px; height: 50px">
          {{ storeService.currentLanguage.clinic
          }}{{ storeService.currentLanguage.space
          }}{{ storeService.currentLanguage.subdoccount }}：</span
        >
        <input
          style="text-align: left; margin-bottom: 15px"
          type="number"
          [(ngModel)]="storeService.query.parameter.limit.VClinicDiagnosis"
        />
      </div>
      <div style="display: flex">
        <span style="width: 150px; height: 50px">
          {{ storeService.currentLanguage.operation
          }}{{ storeService.currentLanguage.space
          }}{{ storeService.currentLanguage.subdoccount }}：</span
        >
        <input
          style="text-align: left; margin-bottom: 15px"
          type="number"
          [(ngModel)]="storeService.query.parameter.limit.VOperate"
        />
      </div>
      <div style="display: flex">
        <span style="width: 150px; height: 50px">
          {{ storeService.currentLanguage.surgery
          }}{{ storeService.currentLanguage.space
          }}{{ storeService.currentLanguage.subdoccount }}：</span
        >
        <input
          style="text-align: left; margin-bottom: 15px"
          type="number"
          [(ngModel)]="storeService.query.parameter.limit.VSurgery"
        />
      </div>
      <div style="display: flex">
        <span style="width: 150px; height: 50px">
          {{ storeService.currentLanguage.transform
          }}{{ storeService.currentLanguage.space
          }}{{ storeService.currentLanguage.subdoccount }}：</span
        >
        <input
          style="text-align: left; margin-bottom: 15px"
          type="number"
          [(ngModel)]="storeService.query.parameter.limit.VTransfer"
        />
      </div>
      <div style="display: flex">
        <span style="width: 150px; height: 50px">
          {{ storeService.currentLanguage.contact
          }}{{ storeService.currentLanguage.space
          }}{{ storeService.currentLanguage.subdoccount }}：</span
        >
        <input
          style="text-align: left; margin-bottom: 15px"
          type="number"
          [(ngModel)]="storeService.query.parameter.limit.VContact"
        />
      </div>
      <div style="display: flex">
        <span style="width: 150px; height: 50px">
          {{ storeService.currentLanguage.icu
          }}{{ storeService.currentLanguage.space
          }}{{ storeService.currentLanguage.subdoccount }}：</span
        >
        <input
          style="text-align: left; margin-bottom: 15px"
          type="number"
          [(ngModel)]="storeService.query.parameter.limit.VICU"
        />
      </div>
      <div style="margin: 10px; text-align: center">
        <button (click)="settings = false">
          {{ storeService.currentLanguage.ok }}
        </button>
      </div>
    </div>
  </dx-popup>
  <dx-popup
    [width]="500"
    [height]="250"
    [showTitle]="true"
    title="{{ storeService.currentLanguage.settingname }}"
    [dragEnabled]="false"
    [closeOnOutsideClick]="true"
    [(visible)]="popupVisible"
  >
    <div *dxTemplate="let data of 'content'">
      <input
        style="width: 70%"
        type="search"
        [(ngModel)]="storeService.query.name"
        placeholder="storeService.currentLanguage.input"
      />
      <div style="margin: 10px; text-align: center">
        <button  (click)="confirm()">
          {{ storeService.currentLanguage.ok }}
        </button>
        <button (click)="cancel()">
          {{ storeService.currentLanguage.cancel }}
        </button>
      </div>
    </div>
  </dx-popup>

  <dx-popup
    [width]="500"
    [height]="250"
    [showTitle]="true"
    title="{{ storeService.currentLanguage.save }}"
    [dragEnabled]="false"
    [closeOnOutsideClick]="true"
    [(visible)]="modelVisible"
  >
    <div>
      <app-modelinfo [(item)]="package"></app-modelinfo>
    </div>
    <div>
      <button (click)="saveModel()">
        {{ storeService.currentLanguage.save }}
      </button>
      <button (click)="cancelModel()">
        {{ storeService.currentLanguage.cancel }}
      </button>
    </div>
  </dx-popup>
</div>

<button (click)="addconditiongroup()">
  +{{ storeService.currentLanguage.add }}{{ storeService.currentLanguage.space
  }}{{ storeService.currentLanguage.conditiongroup }}
</button>
<button
  *ngIf="
    storeService.tableresults !== undefined &&
    storeService.tableresults.length > 0
  "
  (click)="export()"
>
  ⤓{{ storeService.currentLanguage.export }}
</button>
<span
  >{{ storeService.currentLanguage.showresult }}:
  <input type="checkbox" [(ngModel)]="showQueryResult"
/></span>

<div *ngFor="let item of storeService.query.conditionpipe" class="group">
  <!-- <h2>分组</h2>  -->
  <button style="margin-left: 0" (click)="removeGroup(item)">
    −{{ storeService.currentLanguage.remove
    }}{{ storeService.currentLanguage.space
    }}{{ storeService.currentLanguage.conditiongroup }}
  </button>

  <label>
    {{ storeService.currentLanguage.grouprelation }}:
    <select [(ngModel)]="item.relation">
      <option value="Union">{{ storeService.currentLanguage.union }}</option>
      <option value="Except">{{ storeService.currentLanguage.except }}</option>
      <option value="Intercect">
        {{ storeService.currentLanguage.intersect }}
      </option>
    </select>
  </label>
  <hr />

  <app-mrcondition
    [(currentlist)]="item.conditions"
    [autoAddToShwoColumns]="autoAddShwoColumn"
  ></app-mrcondition>
</div>

<div style="text-align: center; max-width: 1800px">
  <button style="width: 88px" (click)="query()">
    ▶{{ storeService.currentLanguage.querybutton }}
  </button>
  <input
    style="margin-left: 50px; text-align: right"
    type="checkbox"
    [(ngModel)]="storeService.queryAllColumnShow"
  />{{ storeService.currentLanguage.showallcolumn }}
  <input
    style="margin-left: 50px; text-align: right"
    type="checkbox"
    [(ngModel)]="storeService.query.parameter.isMridMode"
  />{{ storeService.currentLanguage.mridmode }}
  <input
    style="margin-left: 50px; text-align: right"
    type="checkbox"
    [(ngModel)]="storeService.query.parameter.distinctMrid"
  />{{ storeService.currentLanguage.mriddistinct }}
  <input
    style="margin-left: 50px; text-align: right"
    type="checkbox"
    [(ngModel)]="storeService.query.parameter.strict"
  />{{ storeService.currentLanguage.strictasync }}
  <input
    style="margin-left: 50px; text-align: right"
    type="checkbox"
    [(ngModel)]="storeService.query.parameter.sequence"
  />{{ storeService.currentLanguage.sequenceasync }}
</div>

<div style="width: calc(100vw - 60px); overflow: auto">
  <dx-data-grid
    [dataSource]="results"
    [showBorders]="true"
    [allowColumnResizing]="true"
    [columnAutoWidth]="true"
  >
    <dxi-column
      *ngFor="let item of storeService.resultObjectProperties"
      [dataField]="item"
      [caption]="item"
    ></dxi-column>
    <!-- [columnMinWidth]="50" [columnResizingMode]="columnResizingMode" -->
    <dxo-export
      [enabled]="true"
      fileName="{{ storeService.query.name }}"
      [allowExportSelectedData]="true"
    ></dxo-export>
    <dxo-selection mode="multiple"></dxo-selection>
    <dxo-scrolling columnRenderingMode="virtual"></dxo-scrolling>
  </dx-data-grid>
  <div *ngIf="storeService.tableresults.length > 0">
    {{ storeService.currentLanguage.resultcount }}：{{
      this.storeService.tableresults.length
    }}
  </div>
</div>

<div>
  <div>
    <select [(ngModel)]="source" style="top: -10px">
      <option *ngFor="let item of mappingItems" [value]="item">
        {{ item }}
      </option>
    </select>
    <select [(ngModel)]="target" style="top: -10px">
      <option *ngFor="let item of mappingItems" [value]="item">
        {{ item }}
      </option>
    </select>

    <button (click)="mapping()">chart</button>
    <!-- <button (click)="hotspot()">hotspot</button> -->
  </div>
  <div id="mapping"></div>
  <div echarts [options]="chartOption" class="demo-chart"></div>
</div>
